<template>
  <div>
    <el-button style="margin-bottom: 10px" @click="back">返回</el-button>
    <el-form :model="addData" ref="addData">
      <div class="content">
        <!-- 品牌公司属性 -->
        <div class="cardLeft">
          <el-card>
            <el-card>
              <el-form-item
                label-width="140px"
                label="品牌公司属性"
                style="background: #e1e1e1"
              />
              <el-form-item
                label="品牌公司级别："
                label-width="200px"
                prop="primevallevel"
                :rules="[
                  {
                    required: true,
                    message: '请选择品牌公司级别',
                    trigger: 'change',
                  },
                ]"
              >
                <el-radio-group v-model="addData.primevallevel">
                  <el-radio :label="1">全球公司</el-radio>
                  <el-radio :label="2">省级公司</el-radio>
                  <el-radio :label="3">市级公司</el-radio>
                  <el-radio :label="4">县级公司</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="品牌公司类型："
                label-width="200px"
                prop="primevacompanytype"
                :rules="[
                  {
                    required: true,
                    message: '请选择品牌公司类型',
                    trigger: 'change',
                  },
                ]"
              >
                <el-radio-group v-model="addData.primevacompanytype">
                  <el-radio :label="0">孵化公司</el-radio>
                  <el-radio :label="1">临时公司</el-radio>
                  <el-radio :label="2">正式公司</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-card>
          </el-card>
        </div>
        <!-- 品牌公司创始人信息 -->
        <div class="cardRight">
          <el-card>
            <el-card>
              <el-form-item
                label-width="200px"
                label="品牌公司创始人信息"
                style="background: #e1e1e1"
              />
              <el-form-item
                prop="originatoraccount"
                label="创始人账号："
                label-width="200px"
                :rules="[
                  {
                    required: true,
                    message: '请选择创始人信息',
                    trigger: 'blur',
                  },
                ]"
              >
                <div>
                  <span>{{ addData.originatoraccount }}</span>
                  <el-button
                    type="primary"
                    style="margin-left: 40%"
                    size="small"
                    icon="el-icon-edit"
                    @click="setCreater"
                    >创始人设置</el-button
                  >
                </div>
              </el-form-item>

              <el-form-item
                prop="originatorcompanyname"
                label="创始人公司名称："
                label-width="200px"
                :rules="[
                  {
                    required: true,
                    message: '请选择创始人信息',
                    trigger: 'blur',
                  },
                ]"
              >
                <div>
                  <span>{{ addData.originatorcompanyname }}</span>
                </div>
              </el-form-item>
            </el-card>
          </el-card>
        </div>
      </div>

      <div class="contentNext">
        <!-- 品牌公司开发关系 -->
        <div class="nextLeft">
          <el-card>
            <el-card>
              <el-form-item
                label-width="180px"
                label="品牌公司开发关系"
                style="background: #e1e1e1"
              />
              <el-form-item label="开发关系级别：" label-width="200px">
                <span v-if="addData.primevadeveloprelationlevel == 1"
                  >全球公司</span
                >
                <span v-else-if="addData.primevadeveloprelationlevel == 2"
                  >省级公司</span
                >
                <span v-else-if="addData.primevadeveloprelationlevel == 3"
                  >市级公司</span
                >
                <span v-else-if="addData.primevadeveloprelationlevel == 4"
                  >县级公司</span
                >
                <el-button
                  size="small"
                  icon="el-icon-edit"
                  type="primary"
                  style="margin-left: 50%"
                  @click="developRelation"
                >
                  开发关系设置</el-button
                >
              </el-form-item>
              <el-form-item label="开发关系类型：" label-width="200px">
                <span v-if="addData.primevadeveloprelationtype == '0'"
                  >孵化公司</span
                >
                <span v-else-if="addData.primevadeveloprelationtype == '1'"
                  >临时公司</span
                >
                <span v-else-if="addData.primevadeveloprelationtype == '2'"
                  >正式公司</span
                >
              </el-form-item>
              <el-form-item
                label="开发关系ID："
                prop="primevadeveloprelationid"
                label-width="200px"
                :rules="[
                  {
                    required: true,
                    message: '请选择开发关系ID',
                    trigger: 'blur',
                  },
                ]"
              >
                <span>{{ addData.primevadeveloprelationid }}</span>
              </el-form-item>
              <el-form-item label="开发关系公司名称：" label-width="200px">
                <span>{{ addData.primevadeveloprelationname }}</span>
              </el-form-item>
            </el-card>
          </el-card>
        </div>
        <!-- 品牌公司基础信息 -->
        <div class="nextRight">
          <el-card>
            <el-card>
              <el-form-item
                label-width="190px"
                label="品牌公司基础信息"
                style="background: #e1e1e1"
              />
              <div style="padding: 31.01px 0">
                <el-form-item
                  label="公司行政区划："
                  label-width="200px"
                  required
                >
                  <el-col :span="6">
                    <el-form-item
                      prop="province"
                      :rules="[
                        {
                          required: true,
                          message: '请选择省',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="addData.province"
                        @change="selectProvince(addData.province)"
                        placeholder="请选择省"
                      >
                        <el-option
                          v-for="item in provinces"
                          :key="item.areaid"
                          :label="item.areaname"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      prop="city"
                      :rules="[
                        {
                          required: true,
                          message: '请选择市',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="addData.city"
                        @change="selectCity(addData.city)"
                        placeholder="请选择市"
                      >
                        <el-option
                          v-for="item in citys"
                          :key="item.areaid"
                          :label="item.areaname"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      prop="county"
                      :rules="[
                        {
                          required: true,
                          message: '请选择县',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="addData.county"
                        @change="selectCounty(addData.county)"
                        placeholder="请选择区/县"
                      >
                        <el-option
                          v-for="item in countys"
                          :key="item.areaid"
                          :label="item.areaname"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item
                  label="公司品牌名称："
                  label-width="200px"
                  prop="primevabelongbrandname"
                  :rules="[
                    {
                      required: true,
                      message: '请输入公司品牌名称',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    style="width: 64%"
                    clearable
                    v-model="addData.primevabelongbrandname"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="公司组建凭证："
                  label-width="200px"
                  prop="primevacompanycertificate"
                  :rules="[
                    {
                      required: true,
                      message: '请选择上传文件',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    :action="uploadUrl"
                    :on-success="imguploadSuccess"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-error="uploadError"
                    accept=".png,.jpg,.jpeg,.pdf"
                  >
                    <el-input
                      v-model="addData.fileName"
                      placeholder="请上传文件"
                      style="width: 30%; margin-left: 5px"
                      :disabled="true"
                    ></el-input>
                    <el-button
                      slot="trigger"
                      type="primary"
                      :loading="uploadFlag"
                      icon="el-icon-upload2"
                      size="small"
                      >点击上传</el-button
                    >
                    <!-- <el-button type="danger" @click="viewFile" icon="el-icon-view" size="small">预览</el-button> -->
                  </el-upload>
                </el-form-item>
              </div>
            </el-card>
          </el-card>
        </div>
      </div>
    </el-form>
    <div>
      <el-button
        style="margin-left: 47%"
        :loading="addFlag"
        type="success"
        @click="submit('company', 'baseInfo')"
        >新增品牌公司</el-button
      >
    </div>
  </div>
</template>

<script>
import { getAreaList } from "../../api/companyRelation";
import { BASE_URL } from "../../config/app";
import {
  getOriginList,
  addOrEditCompanyData,
} from "../../api/handWork/handWorkList";
export default {
  data() {
    return {
      // addData: {
      //   province: '', //省
      //   city: '', //市
      //   county: '', //县
      // },
      uploadUrl: BASE_URL + "/goldendays-currency/tool/uploadpro",
      // "http://testopenapi.jtmsh.com/goldendays-currency/tool/uploadpro",
      addData: {
        primevallevel: "", //公司级别
        primevacompanytype: "", //公司类型
        originatoraccount: "", //创始人账号
        originatorcompanyname: "", //创始人公司名称
        primevadeveloprelationid: "", //开发关系id
        primevadeveloprelationname: "", //开发关系公司名称
        primevadeveloprelationtype: "", //开发关系公司类型
        primevadeveloprelationlevel: "", //开发关系级别
        primevaadministrativedivision: "", //行政区域
        primevabelongbrandname: "", //公司名称
        changetype: 0, //新增
        primevacompanycertificate: "", //公司组件凭证
        province: "", //省
        city: "", //市
        county: "", //县
        fileName: "",
        file: "",
        fileData: null,
      },
      provinces: [],
      citys: [],
      countys: [],
      addFlag: false,
      uploadFlag: false,
    };
  },
  mounted() {
    this.areaList(null, 0); // 全国省查询
  },
  activated() {
    const params = this.$route.params;
    if (params.type) {
      if (params.type == 1) {
        this.addData.primevadeveloprelationlevel = params.val.performanceLevel;
        this.addData.primevadeveloprelationid = params.val.companyId;
        this.addData.primevadeveloprelationname = params.val.companyName;
        this.addData.primevadeveloprelationtype = params.val.companyType;
        this.$refs.addData.validate((valid) => {});
      } else if (params.type == 2) {
        this.addData.companyoriginatorid = params.val.userid;
        this.addData.originatoraccount = params.val.usermobile;
        this.addData.originatorcompanyname = params.val.enterprisename;
        this.$refs.addData.validate((valid) => {});
      }
    } else {
      this.addData = {
        primevallevel: "", //公司级别
        primevacompanytype: "", //公司类型
        originatoraccount: "", //创始人账号
        originatorcompanyname: "", //创始人公司名称
        primevadeveloprelationid: "", //开发关系id
        primevadeveloprelationname: "", //开发关系公司名称
        primevadeveloprelationtype: "", //开发关系公司类型
        primevadeveloprelationlevel: "", //开发关系级别
        primevaadministrativedivision: "", //行政区域
        primevabelongbrandname: "", //公司名称
        changetype: 0, //新增
        primevacompanycertificate: "", //公司组件凭证
        province: "", //省
        city: "", //市
        county: "", //县
        fileName: "",
        file: "",
        fileData: null,
      };
      this.$refs.addData.resetFields();
    }
  },
  computed: {
    comaddData() {
      const { province, city, county } = this.addData;
      return `${province},${city},${county}`;
    },
  },
  watch: {
    comaddData() {
      this.addData.primevaadministrativedivision = this.comaddData;
    },
  },
  methods: {
    //上传pdf文件
    //上传之前调用方法
    beforeUpload(file) {
      this.uploadFlag = true;
      // this.addData.fileName = file.name
    },
    uploadError() {
      this.uploadFlag = true;
      this.$message.error("上传失败");
    },
    //创始人设置跳转页面
    setCreater() {
      this.$router.push({ path: "addCreater" });
    },
    //开发关系设置
    developRelation() {
      this.$refs.addData.validateField("primevallevel", (flag) => {
        console.log(flag);

        if (flag) {
          this.$message.error("请选择品牌公司级别");
          return false;
        } else {
          console.log(this.addData.primevallevel);

          this.$router.push({
            name: "开发关系查询",
            params: { level: this.addData.primevallevel },
          });
        }
      });
    },
    imguploadSuccess(response, file) {
      if (response.code == 0) {
        this.uploadFlag = false;
        this.$message.success("上传成功");
        this.addData.fileName = file.name;
        this.addData.primevacompanycertificate = response.data;
      } else {
        this.$message.success("上传失败");
        (this.uploadFlag = false((this.addData.fileName = ""))),
          (this.addData.primevacompanycertificate = "");
      }
    },
    //提交所有信息
    submit(formName, val) {
      this.$refs.addData.validate((valid) => {
        if (valid) {
          this.addFlag = true;
          addOrEditCompanyData(this.addData)
            .then((res) => {
              console.log(res, "新增公司响应");
              if (res.code != 0) {
                this.$message.error(res.message);
                this.addFlag = false;
                return false;
              }
              if (res.message == "success") {
                this.addFlag = false;
                this.$message.success("添加成功");
                this.$router.push({ name: "公司关系设置" });
              }
            })
            .catch((err) => {
              this.addFlag = false;
            });
        }
      });
    },
    //点击确定按钮上传到后台
    // submitAddForm(){
    //     var formData = new FormData();
    //     formData.append('uploadPdf', this.addForm.file);
    //     this.$commonAjax.postFile('/xxx/xxx', formData,
    //     (json)=> {
    //         if (json.code == 0) {
    //         this.$message.success("文件上传成功");
    //         } else {
    //         this.$message.error("文件上传失败");
    //         }
    //     },
    //     (error)=> {
    //         this.$message.error("系统繁忙请稍后再试!");
    //     }
    //     );
    // },
    // 查询省市县列表
    /*
     * provinceid 上级ID
     * cityRank 查看的城市级别 0 是省级 1 是市级 2 是县级
     */

    areaList(provinceid, cityRank) {
      // debugger
      const data = [];
      getAreaList({ provinceid: provinceid })
        .then((response) => {
          // console.log(response)
          if (response.code != 0) {
            this.$message.error(response.message);
            return false;
          }
          switch (cityRank) {
            case 0: // 省列表
              this.provinces = response.data || []; // 省级列表赋值
              break;
            case 1: // 市列表
              this.addData.city = null; // 清除已选市
              this.addData.county = null; // 清除已选县
              this.citys = []; // 清空市类别
              this.countys = []; // 清空县列表
              this.citys = response.data || []; // 市级列表赋值
              break;
            case 2: // 县列表
              this.addData.county = null; // 清除已选县
              this.countys = []; // 清空县列表
              this.countys = response.data || []; // 县级列表赋值
              break;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    back() {
      this.$router.push({
        name: "公司关系设置",
      });
    },
    // 选择省
    selectProvince(item) {
      this.areaList(item.areaid, 1);
      this.addData.province = this.addData.province.areaname;
      // console.log(this.addData.province)
    },
    // 选择市
    selectCity(item) {
      this.areaList(item.areaid, 2);
      this.addData.city = this.addData.city.areaname;
    },
    // 选择县
    selectCounty(item) {
      this.areaList(item.areaid, 3);
      this.addData.county = this.addData.county.areaname;
    },
  },
};
</script>
<style scoped>
.el-form-item /deep/ .el-form-item__label {
  font-size: 16px;
}
.content {
  display: flex;
  margin: 0 auto;
}
.cardLeft {
  width: 48%;
}
.cardRight {
  margin-left: 4%;
  width: 48%;
}
.contentNext {
  display: flex;
  margin: 60px auto;
}
.nextLeft {
  width: 48%;
}
.nextRight {
  margin-left: 4%;
  width: 48%;
}
.el-radio {
  margin-left: 30px;
}
</style>
